<template>
  <div class="company-select">
    <!-- 禁用状态：直接显示公司名称 -->
    <span v-if="disabled" class="company-name">{{ companyName }}</span>
    
    <!-- 启用状态：显示下拉选择框 -->
    <el-select
      v-else
      :value="selectValue"
      @change="handleChange"
      :placeholder="multiple ? '请选择公司（多选）' : '请选择公司'"
      filterable
      clearable
      :multiple="multiple"
      :loading="loading"
      style="width: 100%"
    >
      <el-option
        v-for="item in companyList"
        :key="item.id"
        :label="item.name"
        :value="item.id+''"
      />
    </el-select>
  </div>
</template>

<script>
// 这里需要导入公司列表API,请根据实际接口路径修改
import { companyListApi } from '@/api/industry.js'

export default {
  name: 'CompanySelect',
  
  props: {
    // 绑定的公司ID值
    value: {
      type: [String, Number, Array],
      default: null
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否支持多选
    multiple: {
      type: Boolean,
      default: false
    }
  },
  
  data() {
    return {
      loading: false,
      companyList: [] // 公司列表数据
    }
  },
  
  computed: {
    // 根据当前选中的ID获取公司名称
    companyName() {
      if (!this.value) return '';
      
      // 多选模式
      if (this.multiple) {
        let selectedIds = [];
        
        // 处理数组类型的value
        if (Array.isArray(this.value)) {
          selectedIds = this.value;
        } 
        // 处理字符串类型的value（逗号分隔）
        else if (typeof this.value === 'string' && this.value.includes(',')) {
          selectedIds = this.value.split(',').map(id => id.trim()).filter(id => id);
        } 
        // 处理单个值
        else {
          selectedIds = [this.value];
        }
        
        // 获取对应的公司名称
        const selectedCompanies = selectedIds.map(id => {
          const company = this.companyList.find(item => item.id == id || item.id == String(id));
          return company ? company.name : '';
        }).filter(name => name);
        
        return selectedCompanies.join(',');
      }
      
      // 单选模式
      const company = this.companyList.find(item => item.id == this.value || item.id == String(this.value));
      return company ? company.name : '';
    },
    
    // 处理el-select的value绑定
    selectValue() {
      if (!this.multiple) {
        return this.value;
      }
      
      // 多选模式下,确保返回数组格式给el-select
      if (Array.isArray(this.value)) {
        return this.value.map(id => String(id));
      } else if (typeof this.value === 'string' && this.value) {
        // 字符串格式转换为数组
        return this.value.split(',').map(id => id.trim()).filter(id => id);
      }
      
      return [];
    }
  },
  
  mounted() {
    this.fetchCompanyList();
  },
  
  methods: {
    // 获取公司列表
    async fetchCompanyList() {
      // 检查window对象上是否已缓存公司列表数据
      if (window.companyListCache) {
        this.companyList = window.companyListCache;
        console.log('使用缓存的公司列表数据');
        return;
      }

      // 没有缓存，从后端获取数据
      this.loading = true;
      console.log('从后端获取公司列表数据');
      
      companyListApi().then(res => {
        const companyList = res.data.map(item => {
          return {
            id: item.did,
            name: item.dname,
            sellhousedistrictcode: item.sellhousedistrictcode
          }
        });
        
        // 更新组件数据
        this.companyList = companyList;
        
        // 缓存到window对象
        window.companyListCache = companyList;
        console.log('公司列表数据已缓存到window');
        
        this.loading = false;
      }).catch(error => {
        console.error('获取公司列表失败:', error);
        this.$message && this.$message.error('获取公司列表失败');
        this.loading = false;
      });
    },

    // 清除缓存并重新获取数据
    refreshCompanyList() {
      // 清除window上的缓存
      delete window.companyListCache;
      console.log('已清除公司列表缓存');
      
      // 重新获取数据
      this.fetchCompanyList();
    },
    
    // 处理选择变化
    handleChange(value) {
      let emitValue = value;
      let displayLabel = '';
      let selectedCompanies = [];
      
      // 多选模式处理
      if (this.multiple) {
        if (Array.isArray(value)) {
          // 如果父组件期望字符串格式,转换为逗号分隔的字符串
          if (typeof this.value === 'string') {
            emitValue = value.join(',');
          } else {
            emitValue = value;
          }
          
          // 获取选中公司的名称
          selectedCompanies = value.map(id => {
            const company = this.companyList.find(item => item.id == id || item.id == String(id));
            return company;
          }).filter(company => company);
          
          displayLabel = selectedCompanies.map(company => company.name).join(',');
        }
      } 
      // 单选模式处理
      else {
        const selectedCompany = this.companyList.find(item => item.id == value);
        selectedCompanies = selectedCompany ? [selectedCompany] : [];
        displayLabel = selectedCompany ? selectedCompany.name : '';
      }
      
      // 触发父组件的change事件
      this.$emit('input', emitValue);
      this.$emit('change', emitValue);
      this.$emit('update:display-label', displayLabel);
      this.$emit('company-change', this.multiple ? selectedCompanies : selectedCompanies[0]);
    }
  }
}
</script>

<style scoped>
.company-select {
  width: 100%;
}

.company-name {
  display: inline-block;
  line-height: 32px;
  color: #606266;
  font-size: 14px;
}
</style>
